<!DOCTYPE html>
<html lang="en">
<!-- 融媒号分享页-->

<head>
  <!-- 通用外部文件 -->

  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>区总工会</title>
  <link href="static/finishing/css/swiper.min.css" rel="stylesheet" type="text/css" />
  <!-- <link href="static/finishing/css/reset.css" type="text/css" rel="stylesheet" /> -->
  <!-- <link href="static/finishing/css/find.css" type="text/css" rel="stylesheet" /> -->
  <script src="static/js/jquery-1.8.3.min.js"></script>
  <script src="static/js/wxshare.js"></script>
  <script src="static/js/open.download.js"></script>




  <link rel="stylesheet" href="static/css/group_shared_h5.css">
  <script src="static/js/request.js"></script>

</head>

<body>

  <header>
    <div class="header-title">
      <!-- 通用页面头信息 -->
      <img class="logo" src="static/picture/1575728947236892673.png" onerror="this.style.display = 'none'">
      <div class="title">安居融媒</div>
      <div class="hide" id="downloadUrlOfAndroid">http://ajrmt.ldajw.com/html/invite/nextPage.html?tenant=YTA2MTY=</div>
      <div class="hide" id="downloadUrlOfIOS">http://ajrmt.ldajw.com/html/invite/nextPage.html?tenant=YTA2MTY=</div>
      <div class="download-btn" onclick="openDownloadUrl(-1)">立即下载</div>
    </div>
  </header>
  <!-- 融媒号分享页-->
  <main>
    <div class="params-data hide" id="params-data">
      {"tenant":"YTA2MTY=","groupId":"11909012203"} </div>
    <div class="app-container fixed-header mianyang">
      <div class="media-header">
        <div class="media-bg">
        </div>
        <div class="media-info">
          <img class="org-avatar" src="static/picture/20210812172149_t628gr02s2.jpg"
            onerror="this.src='./../../../../js_css/images/default-avator.png'">
          <div class="follow-wrap">
            <div style="flex: 1;"></div>
            <span class="follow-btn" onclick="openDownloadUrl(-1)">关注</span>
          </div>
          <div class="org-name">区总工会</div>
          <div class="statistics-wrap">
            <span id="fansNum"></span><span class="label">粉丝</span>
            <span id="likeNum"></span><span class="label">获赞</span>
            <span id="exposureNum"></span><span class="label">曝光度</span>
          </div>
          <div class="org-desc">

            <span id="desMore" class="desMore hide" onclick="openDownloadUrl(-1)"
              style="padding-left: 6px;position: absolute;float: right;bottom: 0;right: 0px;background: #fff;">...
              <span style="color: rgba(0,0,0,0.9)"> 展开 </span>
            </span>
          </div>
          <div class="org-ip"> IP四川 </div>
        </div>
      </div>
      <div class="media-columns" id="mediaColumns">
        <div id="columnGroup" class="columnGroup">
          <div class="column-item  column-active">
            <span>精选</span>
          </div>
          <div class="column-item ">
            <span>新闻</span>
          </div>
        </div>
      </div>
      <div class="columns-list" style="line-height: normal;">
        <ul id="columnsList">
          <div class="nodata">暂无数据</div>
        </ul>
      </div>
    </div>
  </main>
  <div class="alert_box hide">
    <div class="alert_bg"></div>
    <div class="alert_con">
    </div>
    <div>
    </div>
  </div>
</body>
<script src="static/finishing/js/imagesloaded.pkgd.min.js"></script>
<script src="static/finishing/js/masonry.pkgd.min.js"></script>
<script src="static/finishing/js/swiper.min.js"></script>
<script>

  // 通用 js 代码
  function ajax(options) {
    options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType || 'json';
    params = formatParams(options.data);
    var xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      //ie6以下
      xhr = ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML);
        } else {
          options.error && options.error(status);
        }
      }
    }
    if (options.type == 'GET') {
      xhr.open('GET', options.url + '?' + params, true);
      xhr.setRequestHeader("tenant", tenantId);
      xhr.send(null);
    } else if (options.type == 'POST') {
      params = options.data;
      xhr.open('POST', options.url, true);
      xhr.setRequestHeader("tenant", tenantId);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Authorization", "Basic c2N0dl91aTpzY3R2X3VpX3NlY3JldA==");
      // 2022.09.16 绵阳登录需求 增加token 字段
      var token = JSON.parse(localStorage.getItem("userResData")) ? JSON.parse(localStorage.getItem(
        "userResData")).token : ''
      if (token) {
        xhr.setRequestHeader("token", "Bearer " + token)
      }

      xhr.send(params);
    }
  }

  function formatParams(data) {
    var arr = [];
    for (var name in data) {
      arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
    }
    return arr.join('&');
  }

  // 格式化秒
  function formatSeconds(value) {
    var theTime = parseInt(value); // 秒
    var theTime1 = 0; // 分
    var theTime2 = 0; // 小时
    if (theTime > 60) {
      theTime1 = parseInt(theTime / 60);
      theTime = parseInt(theTime % 60);
      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
      }
    }
    var result = "" + parseInt(theTime); //秒
    if (10 > theTime > 0) {
      result = "0" + parseInt(theTime); //秒
    } else {
      result = "" + parseInt(theTime); //秒
    }
    if (10 > theTime1 > 0) {
      result = "0" + parseInt(theTime1) + ":" + result; //分，不足两位数，首位补充0，
    } else {
      result = "" + parseInt(theTime1) + ":" + result; //分
    }
    if (theTime2 > 0) {
      result = "" + parseInt(theTime2) + ":" + result; //时
    }
    return result;
  }



  /**
       * 根据ua获取打开分享页的渠道
       * 1 app,2 微信,3 微博，4 QQ空间，5 其他(移动端忽略)
       */
  function detectPlatformByUa() {
    const ua = window.navigator.userAgent
    // if(/iPhone|iPad|iPod|iOS/i.test(ua)) {
    //     return 'iOS'
    // } else if(/Android/i.test(ua)){
    //     return 'Android'
    // } else {
    //     return 'other'
    // }

    if (/MicroMessenger/i.test(ua)) {
      return '2'
    } else if (/QQBrowser/i.test(ua)) {
      return '4'
    } else if (/weibo/i.test(ua)) {
      return '3'
    } else {
      return '5'
    }
  }



  // 在分享页中将a标签中的href由APP内链处理为分享页地址
  window.onload = function () {
    const aTags = document.querySelectorAll("a")
    aTags.forEach(tag => {
      if (tag.href.includes("sctvrouter")) {
        tag.href = tag.dataset.externalLink
      }
    })

    // 所有视频监听播放事件，触发时停止播放所有其他视频
    const videoElems = document.querySelectorAll('video')
    videoElems.forEach((videoElem, index, videoNodeList) => {
      videoElem.addEventListener('play', () => {
        const videos = Array.from(videoNodeList)
        videos.splice(index, 1)
        videos.forEach(video => {
          video.pause()
        })
      })
    })
  }

</script>
<script>

  // 业务 js 代码

  var baseUrl = 'https://cms.sctvcloud.com:37443'

  // 参数
  var paramsJson = document.getElementById("params-data").innerText;
  // var tenantId = 'YTA2MTY=';
  var tenantId = ''; //租户id
  var groupId = ''; //融媒号id
  var replyNode = ''; // 选中的评论Node元素 （针对绵阳登录H5需求 添加的字段）
  var isUseAnchorHomepage = '' // 0否 1是
  var $grid
  console.log("paramsJson:", paramsJson);

  if (paramsJson.length > 0 && paramsJson !== "{}") {
    var paramsData = JSON.parse(paramsJson);
    console.log("paramsData:", paramsData, paramsData.hasOwnProperty('imgUrlList'));

    if (paramsData.hasOwnProperty('tenant') && paramsData.hasOwnProperty(
      'groupId')) {

      tenantId = paramsData.tenant;
      groupId = paramsData.groupId;


      //统计渠道
      viewsNum(groupId)


      // 获取融媒号信息
      var requestInfoParams = {
        id: groupId
      };
      getGroupInfo(requestInfoParams);

    } else {
      console.log('缺少某个值，不访问：', paramsData.hasOwnProperty('id'), paramsData.hasOwnProperty('tenantId'));

    }
  } else {
    console.log('参数错误');
  }






  function viewsNum(id) {
    var dataJson = {};
    dataJson.channel = detectPlatformByUa();
    dataJson.contentId = id;
    dataJson.contentType = 22;
    console.log(dataJson)
    ajax({
      url: baseUrl + '/api/interact/client/interaction/incrViewNum',
      type: 'POST',
      dataType: 'json',
      data: JSON.stringify(dataJson),
      success: function () {
        console.log('统计点击+1')
      }
    })
  }
  // 用于阻碍多次滑动条件 解决安卓滑动bug
  let lockScroll = false
  //获取融媒号信息
  function getGroupInfo(requestParams) {

    ajax({
      url: baseUrl + '/api/content/client/groupClient/newInfo',
      type: 'get',
      dataType: 'json',
      data: requestParams,
      success: function (response, xml) {
        var responseInfo = JSON.parse(response)
        if (responseInfo.code !== 0) {
          console.log('error->', responseInfo.msg);
          document.getElementById("columnGroup").style.display = 'none';
          document.getElementById("columnsList").style.display = 'none';
          return
        }
        var res = responseInfo.data;
        isUseAnchorHomepage = res.isUseAnchorHomepage
        var fansCount = res.fansCount; //
        var likeCount = res.likeCount; //
        var exposureCount = res.exposureCount; //
        var bgImageUrl = res.bgImageUrl; //
        if (fansCount || fansCount === 0) {
          if (fansCount >= 10000) {
            fansCount = (parseInt(fansCount / 10000 * 10) / 10).toFixed(1) + 'w'
          } else
            if (fansCount > 1000 && fansCount < 10000) {
              fansCount = (parseInt(fansCount / 1000 * 10) / 10).toFixed(1) + 'k'
            }
          document.getElementById("fansNum").innerHTML = fansCount;
        }
        if (likeCount || likeCount === 0) {
          if (likeCount >= 10000) {
            likeCount = (parseInt(likeCount / 10000 * 10) / 10).toFixed(1) + 'w'
          } else
            if (likeCount > 1000 && likeCount < 10000) {
              likeCount = (parseInt(likeCount / 1000 * 10) / 10).toFixed(1) + 'k'
            }
          document.getElementById("likeNum").innerHTML = likeCount;
        }
        if (exposureCount || exposureCount === 0) {
          // todo 
          if (exposureCount >= 10000) {
            exposureCount = (parseInt(exposureCount / 10000 * 10) / 10).toFixed(1) + 'w'
          } else
            if (exposureCount > 1000 && exposureCount < 10000) {
              exposureCount = (parseInt(exposureCount / 1000 * 10) / 10).toFixed(1) + 'k'
            }
          document.getElementById("exposureNum").innerHTML = exposureCount;
        }
        if (bgImageUrl && bgImageUrl.length) {
          $('.media-bg').css('background-image', 'url(' + bgImageUrl + ')');
        }
        if (res.listGroupNode.length > 0) {

          var columnHtml = '';
          res.listGroupNode.forEach((item, index) => { // 格式化-发布日期
            columnHtml += '<div data-id="' + item.id + '" class="column-item ' + (index === 0 ? 'column-active' : '') + '">' +
              '<span>' + item.name + '</span>' +
              '</div>'

          });
          // 一个默认栏目的时候不显示栏目栏
          // if(res.listGroupNode.length===1){
          //   document.getElementById("columnGroup").style.display = 'none';
          // }else{

          //   document.getElementById("columnGroup").style.display = 'flex';
          //   document.getElementById("columnGroup").innerHTML = columnHtml;
          // }

          // 获取栏目新闻
          var requestColumnNews = {
            "current": 1,
            "map": {},
            "model": res.listGroupNode[0].id,
            "order": "descending",
            "size": 20,
            "sort": "id"

          };
          getGroupNews(requestColumnNews);
          tabs()
          //滚动事件触发
          window.onscroll = function () {
            // +40是因为部分安卓手机上底部有遮挡，取不到刚好的值，给了一个40容错
            if (getScrollTop() + getClientHeight() + 80 >= getScrollHeight()) {
              if (lockScroll) return
              // 触底
              if (isOutOfLength) return
              lockScroll = true;
              requestColumnNews.current++
              getGroupNews(requestColumnNews)
            } else if (getScrollTop() == 0) { // 触顶
              // requestColumnNews.current = 1
              //  getGroupNews(requestColumnNews)
            }
          }
        }

      },
      error: function (status) {
        console.log('error', status)
        document.getElementById("columnGroup").style.display = 'none';
        document.getElementById("columnGroup").innerHTML = '';
      }
    });



  }
  var isOutOfLength = false
  // 分页查询融媒号发布内容，传入融媒号栏目id
  function getGroupNews(requestParams) {
    console.log('获取栏目数据了');
    ajax({
      url: baseUrl + '/api/content/client/groupClient/newGetGroupContentPage',
      type: 'POST',
      dataType: 'json',
      data: JSON.stringify(requestParams),
      success: function (response, xml) {
        var responseNews = JSON.parse(response)
        if (requestParams.current === 1) {
          document.getElementById("columnsList").innerHTML = '';
          isOutOfLength = false
        }
        if (responseNews.code !== 0 || (requestParams.current === 1 && responseNews.data.records.length === 0)) {
          console.log('error->', responseNews.msg);
          // todo 加一个暂无数据的显示
          let nodata = '<div class="nodata">暂无数据</div>'
          document.getElementById("columnsList").innerHTML = nodata
          // document.getElementById("columnsList").style.display = 'none';
          return
        }
        var list = responseNews.data.records;

        if (list.length > 0) {

          var newsHtml = '';
          list.forEach((item, index) => {
            // 格式化-发布日期
            var publishTime = getDateDiff(item.publishTime);

            //TODO: S 测试用添加
            item.type = 666
            item.imgUrl = (index % 2 == 0) ? "https://n.sinaimg.cn/front/426/w640h1386/20190112/2nxC-hrpcmqv8876703.jpg" : "https://pic4.zhimg.com/v2-bc6d0cc891904bf4f97047842dde5e37_r.jpg"
            isUseAnchorHomepage = true

            if (isUseAnchorHomepage) { //显示主播主页
              if ($grid) {
                $grid.imagesLoaded().done(function () {
                  $grid.masonry('layout');
                });
              }

              // item.imgUrl = 'https://n.sinaimg.cn/front/426/w640h1386/20190112/2nxC-hrpcmqv8876703.jpg'

              let htmlString = ''

              htmlString += '<div class="grid-item item">';
              htmlString += '<img src="' + item.imgUrl + '" class="item-img" />';
              htmlString += '<section class="section-p">';
              htmlString += '<p class="title-p">' + item.title + '</p>';
              htmlString += '<p class="name-p">' + item.author + '</p>';
              htmlString += '<p class="price-p">' + item.likeCount + '</p>';
              htmlString += '</section>';
              htmlString += '</div>'


              newsHtml += htmlString
              //TODO: E
            } else {
              switch (item.type) {
                // 内容类型,1-新闻，2-视频，3-直播，23-微头条
                case 23:
                  {
                    newsHtml += '<li class="news-item" data-url="' + item.shareInfo.shareUrl + '">' +
                      '<div class="mictop-item"> ' +
                      ' <div class="news-text">' +
                      ' <div class="item-title">' +
                      ' <span class="tag">' + "#" + item.labelName + "#" + '</span> ' +
                      item.title +
                      '<span class="titleMore hide" onclick="openDownloadUrl(-1);event.stopPropagation();" style="padding-left: 6px;position: absolute;float: right;bottom: 0;right: 0px;background: #fff">...' +
                      '<span style="color: #0C89D6"> 全文 </span>' +
                      '</span>' +
                      '</div>' +
                      '</div>' +
                      '<div class="img-grid ' + ((item.imageUrlList && item.imageUrlList.length > 1 && item.imageUrlList.length % 2 === 0 && item.imageUrlList.length <= 4) ? 'img-grid-four' : '') + ((item.imageUrlList && item.imageUrlList.length % 2 !== 0 && item.imageUrlList.length < 4) || (item.imageUrlList && item.imageUrlList.length > 4 && item.imageUrlList.length <= 9) ? 'img-grid-nine' : '') + '"  id="imgGrid"> ' +
                      '<ul class="grid-list ' + (!item.imageUrlList || item.imageUrlList.length < 2 ? 'hide' : '') + '">' +
                      (item.imageUrlList && item.imageUrlList.length > 0 ? buildImgs(item.imageUrlList, item.type) : '') +
                      '</ul>' +
                      '<div class="cover-img ' + (!item.coverImageUrl && (!item.imageUrlList || item.imageUrlList.length > 1) ? 'hide' : '') + ' ">' +
                      '<img src="' + (item.coverImageUrl || (item.imageUrlList && item.imageUrlList[0])) + '" />' +
                      '<div class="play-middle ' + (item.videoUrl && item.videoUrl.length > 0 ? '' : 'hide') + '">' +
                      '<img class="play-icon-middle" src="./../../../../js_css/images/play_middle.png" />' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '<div class="bottom-wrap">' +
                      '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                      '<span class="time"> ' + publishTime + ' </span>' +
                      '</div>' +
                      '</div>' +
                      '</li>'
                  }

                  break;
                case 3: {
                  let liveStatus = getLiveStatus(item.status)
                  newsHtml += '<li class="news-item live-item" data-id=""  data-url="' + item.shareInfo.shareUrl + '">' +
                    '<!-- 左右布局 左侧标题+右侧图片 -->  ' +
                    '<div class="live-top item-box">' +
                    '<!-- 左侧标题和时间 -->' +
                    '<div class="item-left">' +
                    '<span class="item-title">' +
                    '<!-- 直播预约tag -->' +
                    '<div class="bg-video-advance ' + (liveStatus.class === '' && (!item.coverImageUrl || !item.imageUrlList) ? '' : 'hide') + '">' +
                    '<span class="advance">' + liveStatus.name + '</span>' +
                    '</div>' + item.title +

                    '</span>' +
                    '<div class="item-info ' + (item.style != 1 ? 'hide' : '') + '">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="item-time"> ' + publishTime + ' </span>&nbsp; <span class="item-pageviews hide"> 10阅读 </span>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 右侧图片 直播状态 视频时间 -->' +
                    ' <div class="item-right ' + (item.style != 1 ? 'hide' : '') + '">' +
                    '<img class="item-img" src="' + (item.coverImageUrl || (item.imageUrlList && item.imageUrlList[0])) + '" />' +
                    '<!-- 预告 直播状态，1-直播预约，2-正在直播，3-直播回放，4-慢直播-->' +
                    '<div class="live-state-tag live-state-tag_forecast ' + (item.status != 1 ? 'hide' : '') + '">' +
                    '直播预约' +
                    '</div>' +
                    '<!-- 直播中 -->' +
                    '<div class="live-state-tag ' + (item.status === 2 || item.status === 4 ? '' : 'hide') + '">' +
                    '<img src="./../../../../js_css/images/live-onair.gif" /> 直播中' +
                    '</div>' +
                    '<!-- 直播回看 -->' +
                    '<div class="live-state-tag live-state-tag_lookback ' + (item.status != 3 ? 'hide' : '') + '">回看</div>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 上下布局  上面标题 下面图片 1-单图样式（左图右文，右图左文），2-单图大图样式（上图下文，下图上文），3-三图样式-->' +
                    '<div class="live-bottom ' + ((item.style == 2 || item.style == 3) ? '' : 'hide') + '" >' +
                    '<!-- 直播中 预约直播 热度 -->' +
                    '<div class="top-tag-wrap">' +
                    '<div class="live-state-tag ' + liveStatus.class + '">' +
                    '<img src="./../../../../js_css/images/live-onair.gif" class=" ' + (item.status != 2 ? 'hide' : '') + '" /> ' + liveStatus.name + '' +
                    '</div>' +
                    '<span class="hot-number ' + (item.style == 2 ? '' : 'hide') + '">' + item.viewCount + '热度</span>' +
                    '</div>' +
                    '<!-- 单张图片 包含视频播放按钮 -->' +
                    '<div class="cover-single ' + ((item.imageUrlList && item.imageUrlList.length > 0 && item.style == 2) ? '' : 'hide') + '">' +
                    '<img src="' + (item.imageUrlList && item.imageUrlList[0]) + '"' +
                    'alt="">' +
                    '<div class="play-middle">' +
                    '<img class="play-icon-middle" src="./../../../../js_css/images/play_middle.png" />' +
                    '</div>' +
                    '</div>' +
                    '<!-- 九宫格 预约直播等tag用顶部的 -->' +
                    '<div class="img-grid-wrap ' + ((item.imageUrlList && item.imageUrlList.length > 0) && item.style == 3 ? '' : 'hide') + '">' +
                    '<ul class="grid-list">' +
                    (item.imageUrlList && item.imageUrlList.length > 0 ? buildImgs(item.imageUrlList, item.type) : '') +
                    '</ul>' +
                    '</div>' +
                    '<div class="bottom-wrap">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="time"> ' + publishTime + ' </span>' +
                    '</div>' +
                    '</div>' +
                    '</li>'

                }
                  break
                case 2:
                  var videoLength = item.videoLength && parseInt(item.videoLength) > 0 ? formatSeconds(
                    item.videoLength) : 0;
                  var ifShowVideo = videoLength === 0 ? 'hide' : !item.coverImageUrl && (!item.imageUrlList || !item.imageUrlList.length) ? '' : 'hide';
                  console.log('是否展示标题video', ifShowVideo);
                  let style = 1
                  if (item.videoStyle === 1) {//上下模式
                    style = 2
                  }
                  // 1-单图样式（左图右文，右图左文），2-单图大图样式（上图下文，下图上文），3-三图样式
                  newsHtml += '<li class="news-item live-item video-item" data-id=""  data-url="' + item.shareInfo.shareUrl + '">' +
                    '<!-- 左右布局 左侧标题+右侧图片 -->' +
                    '<div class="live-top item-box">' +
                    '<!-- 左侧标题和时间 -->' +
                    '<div class="item-left">' +
                    '<span class="item-title">' +
                    '<!-- 回放的时间 -->' +
                    '<div class="bg-video-title ' + ifShowVideo + '">' +
                    '<div class="bg-video">' +
                    '<img class="play-icon" src="./../../../../js_css/images/play_grey.png" />' +
                    '<span class="video-time ">' + videoLength + '</span>' +
                    '</div>' +
                    '</div>' +
                    item.title +
                    '</span> ' +
                    '<div class="item-info ' + (style != 1 ? 'hide' : '') + '">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="item-time"> ' + publishTime + ' </span>&nbsp; <span class="item-pageviews hide"> 10阅读 </span>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 右侧图片  视频时间 -->' +
                    '<div class="item-right ' + (style != 1 ? 'hide' : '') + '">' +
                    '<img class="item-img" src="' + item.coverImageUrl + '" />' +
                    '<!--  视频的时间 -->' +
                    '<div class="bg-video ">' +
                    '<img class="play-icon" src="./../../../../js_css/images/play.png" />' +
                    '<span class="video-time">' + videoLength + '</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 上下布局  上面标题 下面图片 -->' +
                    '<div class="live-bottom ' + (style === 2 ? '' : 'hide') + '">' +

                    '<!-- 单张图片 包含视频播放按钮 -->' +
                    '<div class="cover-single ' + ((item.imageUrlList && item.imageUrlList.length > 0) ? '' : 'hide') + '">' +
                    '<img src="' + (item.imageUrlList && item.imageUrlList[0]) + '"' +
                    'alt="">' +
                    '<div class="play-middle">' +
                    '<img class="play-icon-middle" src="./../../../../js_css/images/play_middle.png" />' +
                    '</div>' +
                    '</div>' +

                    '<div class="bottom-wrap">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="time"> ' + publishTime + ' </span>' +
                    '</div>' +
                    '</div>' +
                    '</li>'
                  break
                case 4:
                case 1:
                  var videoLength = item.videoLength && parseInt(item.videoLength) > 0 ? formatSeconds(
                    item.videoLength) : 0;
                  var ifShowVideo = videoLength === 0 ? 'hide' : !item.coverImageUrl && (!item.imageUrlList || !item.imageUrlList.length) ? '' : 'hide';
                  // 1-单图样式（左图右文，右图左文），2-单图大图样式（上图下文，下图上文），3-三图样式
                  newsHtml += '<li class="news-item live-item" data-id=""  data-url="' + item.shareInfo.shareUrl + '">' +
                    '<!-- 左右布局 左侧标题+右侧图片 -->' +
                    '<div class="live-top item-box">' +
                    '<!-- 左侧标题和时间 -->' +
                    '<div class="item-left">' +
                    '<span class="item-title ' + (item.style === 1 && (item.imageUrlList || (item.imageUrlList && item.imageUrlList.length)) ? 'maxline2' : '') + '">' +
                    '<!-- 回放的时间 -->' +
                    '<div class="bg-video-title ' + ifShowVideo + '">' +
                    '<div class="bg-video">' +
                    '<img class="play-icon" src="./../../../../js_css/images/play_grey.png" />' +
                    '<span class="video-time ">' + videoLength + '</span>' +
                    '</div>' +
                    '</div>' +
                    item.title +
                    '</span>' +
                    '<div class="item-info ' + (item.style != 1 ? 'hide' : '') + '">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="item-time"> ' + publishTime + ' </span>&nbsp; <span class="item-pageviews hide"> 10阅读 </span>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 右侧图片  视频时间 -->' +
                    '<div class="item-right ' + (item.style != 1 || (!item.imageUrlList || !item.imageUrlList.length) ? 'hide' : '') + '">' +
                    '<img class="item-img" src="' + (item.coverImageUrl || (item.imageUrlList && item.imageUrlList[0])) + '" />' +
                    '<!--  视频的时间 -->' +
                    '<div class="bg-video ' + (videoLength != 0 ? '' : 'hide') + '">' +
                    '<img class="play-icon" src="./../../../../js_css/images/play.png" />' +
                    '<span class="video-time">' + videoLength + '</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<!-- 上下布局  上面标题 下面图片 -->' +
                    '<div class="live-bottom ' + ((item.style == 2 || item.style == 3) ? '' : 'hide') + '">' +
                    '<!-- 单张图片 包含视频播放按钮 -->' +
                    '<div class="cover-single ' + (((item.imageUrlList && item.imageUrlList.length > 0) && item.style == 2) ? '' : 'hide') + '"> ' +
                    '<img src="' + (item.coverImageUrl || (item.imageUrlList && item.imageUrlList[0])) + '"' +
                    'alt="">' +
                    '</div>' +
                    '<!-- 九宫格 预约直播等tag用顶部的 -->' +
                    '<div class="img-grid-wrap ' + (((item.imageUrlList && item.imageUrlList.length > 0) && item.style == 3) ? '' : 'hide') + '">' +
                    '<ul class="grid-list">' +
                    (item.imageUrlList && item.imageUrlList.length > 0 ? buildImgs(item.imageUrlList, item.type) : '') +
                    '</ul>' +
                    '</div>' +
                    '<div class="bottom-wrap">' +
                    '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                    '<span class="time"> ' + publishTime + ' </span>' +
                    '</div>' +
                    '</div>' +
                    '</li>'
                  break
                case 23:
                  {
                    newsHtml += '<li class="news-item" data-url="' + item.shareInfo.shareUrl + '">' +
                      '<div class="mictop-item"> ' +
                      ' <div class="news-text">' +
                      ' <div class="item-title">' +
                      ' <span class="tag">' + "#" + item.labelName + "#" + '</span> ' +
                      item.title +
                      '<span class="titleMore hide" onclick="openDownloadUrl(-1);event.stopPropagation();" style="padding-left: 6px;position: absolute;float: right;bottom: 0;right: 0px;background: #fff">...' +
                      '<span style="color: #0C89D6"> 全文 </span>' +
                      '</span>' +
                      '</div>' +
                      '</div>' +
                      '<div class="img-grid ' + ((item.imageUrlList && item.imageUrlList.length > 1 && item.imageUrlList.length % 2 === 0 && item.imageUrlList.length <= 4) ? 'img-grid-four' : '') + ((item.imageUrlList && item.imageUrlList.length % 2 !== 0 && item.imageUrlList.length < 4) || (item.imageUrlList && item.imageUrlList.length > 4 && item.imageUrlList.length <= 9) ? 'img-grid-nine' : '') + '"  id="imgGrid"> ' +
                      '<ul class="grid-list ' + (!item.imageUrlList || item.imageUrlList.length < 2 ? 'hide' : '') + '">' +
                      (item.imageUrlList && item.imageUrlList.length > 0 ? buildImgs(item.imageUrlList, item.type) : '') +
                      '</ul>' +
                      '<div class="cover-img ' + (!item.coverImageUrl && (!item.imageUrlList || item.imageUrlList.length > 1) ? 'hide' : '') + ' ">' +
                      '<img src="' + (item.coverImageUrl || (item.imageUrlList && item.imageUrlList[0])) + '" />' +
                      '<div class="play-middle ' + (item.videoUrl && item.videoUrl.length > 0 ? '' : 'hide') + '">' +
                      '<img class="play-icon-middle" src="./../../../../js_css/images/play_middle.png" />' +
                      '</div>' +
                      '</div>' +
                      '</div>' +
                      '<div class="bottom-wrap">' +
                      '<span class="tag-top ' + (item.isTop && item.isTop === 1 ? '' : 'hide') + '"> 置顶 </span>' +
                      '<span class="time"> ' + publishTime + ' </span>' +
                      '</div>' +
                      '</div>' +
                      '</li>'
                  }

                  break;
                default:

                  break;
              }
            }







          });
          document.getElementById("columnsList").style.display = 'block';
          // if (isUseAnchorHomepage) {
          //   document.getElementById("columnsList").innerHTML += '<aside class="fall-box grid">' + newsHtml + '</aside>'
          // /*瀑布流初始化设置*/
          // var $grid = $('.grid').masonry({
          //   itemSelector: '.grid-item',
          //   gutter: 10
          // });
          // // layout Masonry after each image loads
          // $grid.imagesLoaded().done(function () {
          //   $grid.masonry('layout');
          // });
          // } 

          // if (!document.getElementById("columnsList").innerHTML&&!isUseAnchorHomepage){
          //   document.getElementById("columnsList").innerHTML = ''
          //   document.getElementById("columnsList").innerHTML += newsHtml;
          // }else{
          //   document.getElementById("columnsList").innerHTML = ''
          //   document.getElementById("columnsList").innerHTML += '<aside class="fall-box grid">' + newsHtml + '</aside>'
          //   /*瀑布流初始化设置*/
          //   var $grid = $('.grid').masonry({
          //     itemSelector: '.grid-item',
          //     gutter: 10
          //   });
          //   // layout Masonry after each image loads
          //   $grid.imagesLoaded().done(function () {
          //     $grid.masonry('layout');
          //   });
          // }
          var columnsList = document.getElementById("columnsList");
          if (!columnsList.innerHTML.trim() && !isUseAnchorHomepage) {
            columnsList.innerHTML = newsHtml;
          } else {
            if (isUseAnchorHomepage) {
              if (requestParams.current === 1) {
                $("#columnsList").append('<aside class="fall-box grid"></aside>');
                $(".grid").append(newsHtml)
                $grid = $('.grid').masonry({ // 初始化 Masonry，并将 $grid 赋值给外部变量  
                  itemSelector: '.grid-item',
                  gutter: 10
                });
                $grid.imagesLoaded().done(function () {
                  $grid.masonry('layout');
                });
                $(".grid").append(newsHtml); // 在初始化后添加内容  
              } else {
                var $items = $(".grid-item")
                $items.imagesLoaded().done(function () {
                  $grid.masonry('layout');
                  $grid.append($items).masonry('appended', $items);
                });
                // debugger
                // $items.imagesLoaded().done(function () {
                //   $grid.append($items).masonry('appended', $items);
                // });
                // $grid.masonry().append( $items ).masonry( 'appended', $items ).masonry();
              }

              // var asideElement = document.querySelector('aside.fall-box.grid');
              // if (asideElement) {
              //   // columnsList.innerHTML += '<aside class="fall-box grid">' + newsHtml + '</aside>';
              //   // columnsList.innerHTML += newsHtml;
              //   // var $grid = $('.grid').masonry({
              //   //   itemSelector: '.grid-item',
              //   //   gutter: 10
              //   // });
              // } else {
              //   asideElement.innerHTML += newsHtml
              // }


              // var $grid = $('.grid').masonry({
              //   itemSelector: '.grid-item',
              //   gutter: 10
              // });
              // var $items = $('<div class="grid-item item">')
              // $items.imagesLoaded().done(function () {
              //   $items.imagesLoaded().done(function () {
              //     $grid.masonry('layout');
              //     $grid.append($items).masonry('appended', $items);
              //   });
              // });
            } else {
              columnsList.innerHTML += newsHtml;
            }
          }

          handleCommentText()
          // 更多去app
          if (requestParams.current === 5 && responseNews.data.total > 100) {
            let moreToAppHtml =
              '<li><div onclick="openDownloadUrl(-1)" class="more-to-app">更多内容请下载APP</div></li>'
            document.getElementById("columnsList").innerHTML += moreToAppHtml;
            isOutOfLength = true
          }
          if (requestParams.current * responseNews.data.size >= responseNews.data.total) {

            isOutOfLength = true
          }

          $('#columnsList .news-item').click(function (e) {
            var url = $(this).data("url")
            url && openDetail(url)
          })

          function buildImgs(list, type) {
            let imgHtml = ''
            switch (type) {
              case 23:
                list.forEach(img => {
                  imgHtml += '<li>' +
                    '<div class="grid-item">' +
                    '<img src="' + img + '" />' +
                    '</div>' +
                    '</li>'
                });
                break;
              case 3:
                list = list.filter(item => { return item.indexOf('three_') > -1 })
                list.forEach(img => {
                  imgHtml += '<li>' +
                    '<div class="grid-item">' +
                    '<img src="' + img + '" />' +
                    '</div>' +
                    '</li>'
                });
                break;
              case 4:
              case 1:
                list = list.filter(item => { return item.indexOf('three_') > -1 })
                list.forEach(img => {
                  imgHtml += '<li>' +
                    '<div class="grid-item">' +
                    '<img src="' + img + '" />' +
                    '</div>' +
                    '</li>'
                });
                break;
              default:
                break;
            }
            return imgHtml
          }

          function getLiveStatus(status) {
            // 直播状态，1-直播预约，2-正在直播，3-直播回放，4-慢直播
            let liveStatus = {
              status,
              name: '',
              class: 'hide'
            }
            switch (status) {
              case 1:
                liveStatus.name = '直播预约'
                liveStatus.class = 'live-state-tag_forecast'
                break;
              case 2:
                liveStatus.name = '直播中'
                liveStatus.class = 'live-state-tag'
                break;
              case 3:
                liveStatus.name = '回看'
                liveStatus.class = 'live-state-tag_lookback'
                break;
              case 4:
                liveStatus.name = '直播中'
                liveStatus.class = 'live-state-tag'
                break;

              default:
                break;
            }
            return liveStatus
          }
        }
        lockScroll = false
      },
      error: function (status) {
        console.log('error', status)
        console.log('error', status)
        document.getElementById("columnsList").style.display = 'none';
        document.getElementById("columnsList").innerHTML = '';
      }
    });
  }

  // 栏目点击处理
  function tabs() {
    var tabsBtn = document.getElementsByClassName('column-item');
    for (var i = 0, len = tabsBtn.length; i < len; i++) {
      tabsBtn[i].index = i;
      tabsBtn[i].onclick = function () {
        clearClass();
        addClass(this, 'column-active')
        isOutOfLength = false
        lockScroll = false
        // 获取栏目新闻
        var requestColumnNews = {
          "current": 1,
          "map": {},
          "model": $(this).data("id"),
          "order": "descending",
          "size": 20,
          "sort": "id"

        };
        getGroupNews(requestColumnNews);
        window.scrollTo({
          top: 0,
          // behavior: "smooth"
        });
        //滚动事件触发
        window.onscroll = function () {
          // +60是因为部分安卓手机上底部有遮挡，取不到刚好的值，给了一个60容错
          if (getScrollTop() + getClientHeight() + 60 >= getScrollHeight()) { // 触底
            if (lockScroll) return
            // 触底
            if (isOutOfLength) return
            lockScroll = true;
            requestColumnNews.current++
            getGroupNews(requestColumnNews)
          } else if (getScrollTop() == 0) { // 触顶
            // requestColumnNews.current = 1
            //  getGroupNews(requestColumnNews)
          }
        }
      }
    }


    function clearClass() {
      for (var i = 0, len = tabsBtn.length; i < len; i++) {
        removeClass(tabsBtn[i], 'column-active')
      }
    }
  };
  //获取滚动条当前的位置
  function getScrollTop() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
      scrollTop = document.body.scrollTop;
    }
    return scrollTop;
  }

  //获取当前可视范围的高度  getWindowHeight()
  function getClientHeight() {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
      clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
  }

  //获取文档完整的高度
  function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  }



  function hasClass(elements, cName) {
    if (!elements) return false
    return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"));
  };

  function addClass(elements, cName) {
    if (!hasClass(elements, cName)) {
      elements.className += " " + cName;
    };
  };

  function removeClass(elements, cName) {
    if (hasClass(elements, cName)) {
      elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ");
    };
  };

  function removeElement(_element) {
    var _parentElement = _element.parentNode;
    if (_parentElement) {
      _parentElement.removeChild(_element);
    }
  }
  tabs()
  // 格式化点赞数
  function formatNumber(num) {
    return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
  }
  //字符串转换为时间戳
  function getDateTimeStamp(dateStr) {
    return Date.parse(dateStr.replace(/-/gi, "/"));
  }
  // 格式化时间为几秒前 几分钟前
  function getDateDiff(dateStr) {
    var publishTime = getDateTimeStamp(dateStr) / 1000,
      d_seconds,
      d_minutes,
      d_hours,
      d_days,
      timeNow = parseInt(new Date().getTime() / 1000),
      d,
      date = new Date(publishTime * 1000),
      Y = date.getFullYear(),
      M = date.getMonth() + 1,
      D = date.getDate(),
      H = date.getHours(),
      m = date.getMinutes(),
      s = date.getSeconds();
    //小于10的在前面补0
    if (M < 10) {
      M = '0' + M;
    }
    if (D < 10) {
      D = '0' + D;
    }
    if (H < 10) {
      H = '0' + H;
    }
    if (m < 10) {
      m = '0' + m;
    }
    if (s < 10) {
      s = '0' + s;
    }
    d = timeNow - publishTime;
    d_days = parseInt(d / 86400);
    d_hours = parseInt(d / 3600);
    d_minutes = parseInt(d / 60);
    d_seconds = parseInt(d);
    if (d_days >= 3 && d_days < 7) {
      return d_days + '天前';
    } else
      if (d_days >= 2 && d_days < 3) {
        return '前天' + ' ' + H + ':' + m;
      } else
        if (d_days >= 1 && d_days < 3) {
          return '昨天' + ' ' + H + ':' + m;
        } else if (d_days <= 0 && d_hours > 0) {
          return d_hours + '小时前';
        } else if (d_hours <= 0 && d_minutes > 0) {
          return d_minutes + '分钟前';
        } else if (d_seconds < 60) {
          if (d_seconds <= 0) {
            return '刚刚发表';
          } else {
            return d_seconds + '秒前';
          }
        } else if (d_days >= 7 && d_days < 30) {
          return Y + '-' + M + '-' + D;
        } else if (d_days >= 30) {
          return Y + '-' + M + '-' + D;
        }
  }
  function openDetail(url) {
    openDownloadUrl(-1)
  }
  /** 处理评论内容超过4行展开和收起*/
  function handleCommentText() {
    var doms = $(".item-title");
    for (var index = 0; index < doms.length; index++) {
      if ($(".item-title")[index].scrollHeight > $(".item-title")[index].offsetHeight) {
        if ($($(".item-title")[index]).children('.titleMore')) {
          $($($(".item-title")[index]).children('.titleMore')).removeClass('hide')
        }

      }
    }
  }
  if ($(".org-desc")[0].scrollHeight > $(".org-desc")[0].offsetHeight) {
    // $("#desMore").removeClass('hide')
    $($($(".org-desc")[0]).children('.desMore')).removeClass('hide')

  }


</script>

</html>